<template>
  <!-- 假条详情 -->
  <div class="detail">
    <div
      style="padding:19px;font-size:14px;background-color:#fff;"
      v-for="( item , index ) in list"
      :key="index"
    >
      <p class="flex-row" style="margin:5px 0 15px 0;">
        <span style="font-size:16px;">{{item.userName}}的请假</span>
        <!-- 家长端 -->
        <van-tag plain v-if="item.status == '已生效'" color="#A2D9DD" style="margin-left:20px;">已生效</van-tag>
        <van-tag plain v-if="item.status == '已撤销'" style="margin-left:20px;">已撤销</van-tag>
        <!-- 职工端 -->
        <van-tag plain v-if="item.status == '审批通过'" color="#13B913" style="margin-left:20px;">审批通过</van-tag>
        <van-tag plain v-if="item.status == '审批不通过'" color="#F63E3E" style="margin-left:20px;">审批不通过</van-tag>

        <van-tag
          plain
          v-if="item.status == '审批中'"
          :color="roleType=='parent'?'#13B913':'#4378BE'"
          style="margin-left:20px;"
        >审批中</van-tag>
      </p>
      <p v-if="roleType == 'parent'">
        <span style="color: rgba(16, 16, 16, 0.65);">校区：</span>
        <span>{{item.campusName}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">申请编号：</span>
        <span>{{item.code}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">提交时间：</span>
        <span>{{item.operate_time}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">请假类型：</span>
        <span>{{item.types}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">开始时间：</span>
        <span>{{item.begin_time}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">结束时间：</span>
        <span>{{item.end_time}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">请假时长：</span>
        <span>{{roleType == 'parent'?item.takeoff_time+'天':item.takeoff_time+'时'}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">请假原因：</span>
        <span>{{item.remark==''?'无':item.remark}}</span>
      </p>
      <p>
        <span style="color: rgba(16, 16, 16, 0.65);">图片说明：</span>
        <span v-if="item.picture">
          <van-image :src="item.picture" width="250" />
        </span>
        <span v-else>无</span>
      </p>
      <p v-if="item.cancel_time">
        <span style="color: rgba(16, 16, 16, 0.65);">撤销时间：</span>
        <span>{{item.cancel_time}}</span>
      </p>
      <p v-if="item.approval_time">
        <span style="color: rgba(16, 16, 16, 0.65);">审批时间：</span>
        <span>{{item.approval_time}}</span>
      </p>
    </div>
    <div
      class="column-center"
      style="width:100%;border-radius:8px;margin-top:30px;padding-bottom:30px;"
    >
      <van-button
        v-if="showUndo && status == '已生效'|| roleType == 'teacher' & status == '审批中'"
        style="border-radius:8px;width:90%;"
        size="large"
        @click="backOut"
      >撤销申请</van-button>
    </div>
  </div>
</template>

<script>
import { LeaveInfo } from "@/api/personal";
import { mapGetters } from "vuex";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      code: "",
      list: [],
      status: ""
    };
  },
  methods: {
    backOut() {
      Dialog.confirm({
        title: "确认撤销？",
        message: "撤销后该请假申请将失效",
        confirmButtonColor: "#02BB00"
      })
        .then(async () => {
          // on confirm
          const res = await LeaveInfo("get", {
            cmd: "cancel_takeoff",
            role: this.roleType,
            code: this.code,
            phoneNumber: this.phone
          });
          if (res.result == "OK") {
            Toast.success("撤销成功！");
            this.$router.replace({ name: "LeaveList" });
          }
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  async created() {
    Toast.loading({
      forbidClick: true,
      duration: 0
    });
    this.code = this.$route.params.code;
    // 获取请假详情
    const res = await LeaveInfo("get", {
      cmd: "load_detail",
      role: this.roleType,
      code: this.code,
      phoneNumber: this.phone
    });
    if (res.result == "OK" && res.data.length != 0) {
      this.list = res.data;
      this.status = res.data[0].status;
    }
    Toast.clear();
  },
  computed: {
    ...mapGetters({ phone: "getPhone", roleType: "getRoleType" }),
    showUndo() {
      if (this.list.length != 0 && this.list[0].end_time != "") {
        let time = this.list[0].end_time.split(" ")[0];
        let name = this.list[0].end_time.split(" ")[2];
        if (this.$moment(time).isSameOrAfter(this.$moment(), "day")) {
          return true;
        }
      }
      return false;
    }
  }
};
</script>

<style scoped>
.detail {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
}
p {
  color: black;
}
</style>